<template>
	<view class="content">
		<view class="coin-content">
			<picker @change="bindPickerChange" :value="curIndex" :range="curList">
				<view class="buy-choice">
					<view class="buy-choice-l">
						<text>{{i18n.Select_currency}}</text>
						<view class="">
							{{curList[curIndex]}}
						</view>
					</view>
					<view class="icon iconfont iconarrow-right"> </view>
				</view>
			</picker>
			
			<!-- 收款地址 -->
			<view class="title">
				{{i18n.paymentAddress}}
			</view>
			<view class="buy-way-input">
				<input type="text" :placeholder="i18n.pPaymentAddress" v-model="address"/>
				<view class="eye" @tap.stop="jumpAddressList">
					<uni-icon 
					type="plus" 
					color="#999999" 
					size="24"></uni-icon>
				</view>
			</view>
			<!-- 收款地址 -->
			<!-- 提币数量 -->
			<view class="title">
				{{i18n.withdrawalAmount}}
			</view>
			<view class="buy-way-input">
				<input type="number" :placeholder="i18n.pWithdrawalAmount" v-model="num"/>
			</view>
			<!-- 提币数量 -->
			<!-- 验证码 -->
		<!-- 	<view class="title">
				{{i18n.yanzhengma}}
			</view>
			<view class="buy-way-input">
				<input type="text" :placeholder="i18n.enter_vcode" v-model="yzm"/>
				<view class="eye" @tap.stop="sendMsg">
					<view class="send-msg" :class="issend?'gray':''"> {{yzmContent || i18n.get_vcode}} </view>
				</view>
			</view> -->
			<!-- 验证码 -->
			<!-- 支付密码 -->
			<view class="title">
				{{i18n.paypwd}}
			</view>
			<view class="buy-way-input">
				<input 
				:type="isshow?'text':'password'"
				value="" maxlength="6" 
				:placeholder="i18n.p_paypwd" 
				v-model="paypwd"/>
				<view class="eye" @tap.stop="isShow">
					<uni-icon 
					type="eye" 
					:color="isshow?'#26375b':'#999999'" 
					size="16"></uni-icon>
				</view>
			</view>
			<!-- 支付密码 -->
			<!-- 提币手续费 -->
			<view class="input-item" style="border-top: 2upx solid #eff3f7;">
				<view class="">
					{{i18n.WithdrawalFee}}
				</view>
				<text>{{txsxf}} DCH <!-- {{title_en}} --></text>
			</view>
			<!-- 提币手续费 -->
			<!-- 最低提币额 -->
			<view class="input-item">
				<view class="">
					{{i18n.miniAmount}}
				</view>
				<text>{{txmini}} {{title_en}}</text>
			</view>
			<!-- 最低提币额 -->
			<!-- 备注(选填) -->
			<view class="title" style="border-top:none;">
				{{i18n.remarks}}
			</view>
			<view class="buy-way-input">
				<input type="text" value="" v-model="remark"/>
			</view>
			<!-- 备注(选填) -->
			<button type="primary" hover-class="active" @tap.stop="comfrim">{{i18n.withdrawal}}</button>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getIncode',
				'getCoin',
				'getLang'
			])
		},
		components:{
			uniIcon,Load
		},
		data() {
			return {
				showLoad:false,
				isshow:false,
				issend:false,
				address:'',
				yzmContent: '',
				coinItem:'',
				txmini:'',
				title_en:'',
				txsxf:'',
				yzmTime: 60,
				isclick:false,
				tokenId:'',
				timer:'',
				num:'',
				remark:'',
				yzm:'',
				paypwd:'',
				curList:[],
				list:[],
				curIndex:0
			};
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'提币':'Coin'
			})
			// console.log(this.getLoginInfo);
			console.log(this.getCoin);
			if(this.getCoin.address){
				this.address = this.getCoin.address;
				this.$forceUpdate()
				this.setCoin('')
			}
		},
		onLoad(e){ 
			this.list = JSON.parse(e.list)
			
			for (var i = 0; i < this.list.length; i++) {
				this.curList[i]=this.list[i].title_en
			}
			// console.log(this.curList);
			if(!this.getLoginInfo.paypwd){
				uni.navigateTo({
					url:'/pages/modify-pwd/modify-pwd'
				})
			}
			this.coinItem = e.item;
			// console.log(this.coinItem);
			this.list.forEach((item,index)=>{
				if(item.title_en==JSON.parse(this.coinItem).title_en){
					// console.log(index);
					this.curIndex = index
				}
			})
			// console.log(this.curIndex);
			
			// if(e.address){
			// 	this.address = e.address
			// }
			let {balance,fee,financial,freeze,giving,height,id,price,title_en,txmini,txsxf,usd,usd_price,zdf} = JSON.parse(e.item)
			this.num     = '';
			// this.address = '';
			this.remark  = '';
			this.paypwd  = '';
			this.yzm     = '';
			this.txmini  = txmini;
			this.title_en= title_en;
			this.txsxf   = txsxf;
			this.tokenId = id;
		},
		//监听导航栏按钮事件
		onNavigationBarButtonTap(e) {
			if(e.index =='0'){
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					// onlyFromCamera: true, //只允许通过相机扫码
					success: function (res) {
						if(res.result.code){
							that.address = res.result.address;
						}else{
							that.address = res.result;
						}
						
					}
				});
			}
		},
		methods:{
			...mapMutations(['setCoin']),
			bindPickerChange(e){
				this.curIndex = e.target.value
				// console.log(this.list[this.curIndex]);
				let {balance,fee,financial,freeze,giving,height,id,price,title_en,txmini,txsxf,usd,usd_price,zdf} = this.list[this.curIndex]
				this.num     = '';
				this.address = '';
				this.remark  = '';
				this.paypwd  = '';
				this.yzm     = '';
				this.txmini  = txmini;
				this.title_en= title_en;
				this.txsxf   = txsxf;
				this.tokenId = id;
				
				
				this.$forceUpdate()
			},
			isShow(){
				this.isshow = !this.isshow;
			},
			sendMsg(){
				if(this.issend){ return }
				let url,name;
				if(this.getLoginInfo.incode){
					url = this.getRequestUrl + '/api/sms/sendsms'
					name = (this.getLoginInfo.incode + '') + this.getLoginInfo.email
				}else{
					url = this.getRequestUrl + '/api/sms/emailverify'
					name = this.getLoginInfo.email
				}
				clearTimeout(this.timer);
				let data ={
					name:name,
					lang_type:this.getLang
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					this.showLoad = false;
					showToast(res.data.msg)
					if (res.statusCode == 200 && res.data.code == 1) {
						// 请求成功
						// let _this = this
						this.issend = true
						this._loopTime()
						
					}
				})
			},
			_loopTime() {
				this.yzmTime--;
				this.yzmContent = this.yzmTime + "s";
				this.timer = setTimeout(this._loopTime, 1000)
				if(this.yzmTime < 0){
					this.yzmContent = this.i18n.get_vcode
					clearTimeout(this.timer)
					this.issend = false
				}
			},
			jumpAddressList(){
				uni.navigateTo({
					url:`/pages/wallet/address-list?item=${this.coinItem}`
				})
			},
			comfrim(){
				
				if(!this.address){
					showToast('请输入提币地址')
					return
				}
				
				if(!this.num){
					showToast('请输入提币数量')
					return
				}
				if(!this.paypwd){
					showToast('请输入交易密码')
					return
				}
				if(this.isclick){ retun }
				let url = this.getRequestUrl + '/api/wallet/transfer';
				let data = {
					id      : this.getLoginInfo.id,
					token   : this.getLoginInfo.token,
					number	: this.num,
					token_id: this.tokenId,
					to	    : this.address,
					remark	: this.remark,
					paypwd  : this.paypwd,
					type    : this.getLoginInfo.incode?2:1,
					yzm     : this.yzm
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					this.showLoad = false
					if (res.statusCode == 200 && res.data.code == 1) {
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}else{
						this.num     = '';
						this.address = '';
						this.remark  = '';
						this.paypwd  = '';
						this.yzm     = '';
					}
				}).catch(err=>{
					this.showLoad = false;
					showToast(err.data.msg)
					this.num     = '';
					this.address = '';
					this.remark  = '';
					this.paypwd  = '';
					this.yzm     = '';
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #eff3f7;
	}
</style>
<style lang="scss">
	.content{
		padding:30upx;
		.buy-choice{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.buy-choice-l{
				display: flex;
				align-items: center;
				text{
					font-size: 24rpx;
					color: #2B2E33;
				}
				view{
					line-height: 88rpx;
					margin-left: 20rpx;
				}
			}
			.icon{
				color: #989898;
			}
		}
		.coin-content{
			background-color: #FFFFFF;
			border-radius:10upx;
			padding: 0 15upx 30upx;
			.input-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 80upx;
				height: 80upx;
				border-bottom: 2upx solid #eff3f7;
				view{
					font-size:24upx;
					color: #2B2E33;
					padding-left: 20upx;
				}
				text{
					font-size:22upx;
					color: #2B2E33;
				}
			}
			.title{
				line-height: 94upx;
				font-size:24upx;
				color: #2B2E33;
				border-top: 2upx solid #eff3f7;
				padding-left: 20upx;
				&:first-child{
					border-top:none;
				}
				&:last-child{
					border-top:none;
				}
			}
			.buy-way-input{
				margin-bottom: 56upx;
				position: relative;
				&:last-child{
					border-bottom: 0;
				}
				.eye{
					position: absolute;
					right: 20upx;
					top: 0;
					line-height: 80upx;
					height: 80upx;
					z-index: 999;
					.send-msg{
						font-size:24upx;
						color: #007AFF;
						&.gray{
							color: #999999;
						}
					}
				}
				input{
					background-color: #eff3f7;
					line-height: 80upx;
					height: 80upx;
					border-radius:10upx;
					padding-left: 30upx;
				}
			}
			button{
				width: 280upx;
				height: 80upx;
				line-height: 80upx;
				border-radius:40upx;
				margin: 0 auto;
				font-size:26upx;
				background: #26375b;
				&.active{
					transform: scale(.9);
					opacity: .9;
				}
			}
		}
	}
</style>
